<template>
	<view class="templateList">
		<!-- 模版列表 -->
		<view class="templateListCon">
			<!-- 每一项 -->
			<view
				v-for="item in data.templateItemList"
				:key="item.id"
				class="templateListConItem"
				@tap="goToTemplateDetails(item.id)"
			>
				<image class="templateListConItemImg" :src="item.url" mode="aspectFit"></image>
				<text class="templateListConItemText1">{{item.name}}</text>
				<text class="templateListConItemText2">{{item.count}}套模版</text>
			</view>
			
			<!-- 没有更多-占位 -->
			<view class="templateListZhanWei">没有更多了呦~</view>
		</view>
		
		<!--  -->
	</view>
</template>

<script lang="ts" setup>
	import {ref} from "vue";
	
	const ipt_content = ref("");
	
	const data = ref({
		templateItemList:[
			{
				id:1,
				url:'../../static/employment/templateBg1.png',
				name:'英文版简历模版',
				count:'32'
			},
			{
				id:2,
				url:'../../static/employment/templateBg2.png',
				name:'通用型简历模版',
				count:'103'
			},
			{
				id:3,
				url:'../../static/employment/templateBg3.png',
				name:'AIGC简历模版',
				count:'23'
			},
			{
				id:4,
				url:'../../static/employment/templateBg4.png',
				name:'鸿蒙简历模版',
				count:'10'
			},
			{
				id:5,
				url:'../../static/employment/templateBg5.png',
				name:'云计算简历模版',
				count:'9'
			},
			{
				id:6,
				url:'../../static/employment/templateBg6.png',
				name:'机械工程简历模版',
				count:'56'
			},
			{
				id:7,
				url:'../../static/employment/templateBg7.png',
				name:'检验检测简历模版',
				count:'36'
			},
			{
				id:8,
				url:'../../static/employment/templateBg8.png',
				name:'物流简历模版',
				count:'75'
			},
			{
				id:9,
				url:'../../static/employment/templateBg9.png',
				name:'财会金融',
				count:'29'
			},
			
		]
	})
	
	const goToTemplateDetails = (id:any) => {
		uni.navigateTo({
			url:'/pages/templateDetails/templateDetails?id='+id
		})
	}
	
</script>

<style scoped>
.templateList {
	width: 100%;
	padding: 35rpx;
}
/* 模版列表-白色 */
.templateListCon {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	background: #fff;
	padding: 20rpx;
	border-radius: 25rpx;
}
/* 每一项 */
.templateListConItem {
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	justify-content: flex-start;
	width: 46%;
	box-sizing: border-box;
	/* background: pink; */
	margin: 10rpx;
}
/* 每一项-图片 */
.templateListConItemImg {
	width: 100%;
	height: 280rpx;
	/* background: orange; */
	border-radius: 40rpx;
}
/* 每一项-文字1 */
.templateListConItemText1 {
	padding: 20rpx 0 20rpx 10rpx;
	font-size: 28rpx;
	font-weight: 700;
	/* background: greenyellow; */
}
/* 每一项-文字2 */
.templateListConItemText2 {
	padding-left: 10rpx;
	padding-bottom: 10rpx;
	font-size: 26rpx;
	color: #99a0a8;
	/* background: skyblue; */
}



 /* 没有更多-占位 */
  .templateListZhanWei {
	  display: flex;
	  justify-content: center;
	  width: 100%;
	  height: 100rpx;
	  padding-top: 25rpx;
	  font-size: 32rpx;
	  color:#ccc;
  }
</style>
